<template>
  <el-container>
    <el-header class="header">
      <div id="topImg">
        <div class="toplogo"></div>
        <div class="tx">
          <span>江蘇華岡計算机系统有限公司</span>
          <!-- 下拉列表 -->
          <span class="role">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link"> {{ $store.getters.showId }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="1">パスワード変更</el-dropdown-item>
                  <el-dropdown-item command="2">個人情報</el-dropdown-item>
                  <el-dropdown-item command="3">ログアウト</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>
          <!-- <i class="el-icon-message-solid" style="margin-right: 25px; color: #fff; position: relative; cursor: pointer" @click="pushNews">
            <div v-if="myNewsNum != 0" style="width: 5px; height: 5px; background: red; border-radius: 2.5px; position: absolute; top: -4px; right: -2px"></div>
          </i> -->
          <i class="el-icon-message-solid" style="margin-right: 25px; color: #fff; position: relative; cursor: pointer" @click="way">
            <div v-if="myNewsNum != 0" style="width: 5px; height: 5px; background: red; border-radius: 2.5px; position: absolute; top: -4px; right: -2px"></div>
          </i>
        </div>
      </div>
    </el-header>
    <el-drawer v-model="table" title="" direction="rtl" size="30%" with-header="false">
      <el-table ref="newsDrawer" :data="myNewList" :key="itemKey" tooltip-effect="dark" style="width: 100%" border :header-cell-style="{ background: '#f2f2f2', color: '#606266' }">
        <el-table-column label="メッセージ内容">
          <template #default="scope">
            <p @click="alreadyRead(scope.row.pguid)" style="color: blue; cursor: pointer; white-space: nowrap">{{ scope.row.pcontent }}</p>
          </template>
        </el-table-column>
        <el-table-column label="追加時間" prop="createTime"> </el-table-column>
        <el-table-column label="目下状態" width="80">
          <template #default="scope">
            <p v-if="scope.row.preadflg == '1'">既読</p>
            <p v-if="scope.row.preadflg == '0'">未読</p>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="myNewListSearch.indexPage"
        :page-size="myNewListSearch.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        class="pagination1"
      >
      </el-pagination>
    </el-drawer>
    <el-container style="height: 100%">
      <!-- 侧边栏区域 -->
      <el-aside :width="iscollapse ? '64px' : '200px'" class="aside">
        <div class="cebianlan" @click="toggleCollapse">
          <i class="iconfont icon-shensuo"></i>
        </div>
        <!-- <el-tooltip :disabled="disabled" content="TOP" placement="right" effect="light"> -->
        <!-- <el-menu class="el-menu-vertical-demo" :collapse="iscollapse" router="ture" unique-opened="true" :collapse-transition="false" :default-active="activePath">

          </el-menu> -->
        <!-- </el-tooltip> -->
        <el-menu class="el-menu-vertical-demo" :collapse="iscollapse" router="ture" unique-opened="true" :collapse-transition="false" :default-active="activePath" style="width: 100%">
          <!-- <el-tooltip :disabled="disabled" :content="item.routerName" placement="right" effect="light" v-for="item in routerDirectory" :key="item.routerGuid"> -->
          <el-menu-item index="/home" v-if="iscollapse == false" class="one" @click="clickMenu('/children')">
            <span> <i class="el-icon-s-home"></i>TOP</span>
          </el-menu-item>
          <el-sub-menu :index="item.routerGuid" v-for="item in routerDirectory" :key="item.routerGuid">
            <!-- <el-tooltip :disabled="disabled" :content="item.routerName" placement="right" effect="light"> -->
            <template #title>
              <i :class="item.icon"></i>
              <span>{{ item.routerName }}</span>
            </template>
            <!-- </el-tooltip> -->
            <el-menu-item v-for="itemChild in item.children" :key="itemChild.routerGuid" :index="itemChild.path" @click="clickMenu(itemChild.path, itemChild.routerName)">
              <!-- <el-tooltip :content="itemChild.routerName" placement="right" effect="light"> -->
              <i :class="itemChild.icon"></i>
              {{ itemChild.routerName }}
              <el-badge :value="count" style="margin-left: 8px; height: 20px; line-height: 18px" v-if="itemChild.path == '/MyMeeting' && count != 0"></el-badge>
              <!-- </el-tooltip> -->
            </el-menu-item>
          </el-sub-menu>
          <!-- </el-tooltip> -->
        </el-menu>
      </el-aside>

      <el-main style="background-color: #ececec">
        <el-container id="small">
          <el-header> <common-tabs class="tabsClass"></common-tabs> </el-header>
          <el-main> <router-view @func="unReadmessage"></router-view> </el-main>
        </el-container>
      </el-main>
      <el-dialog title="パスワード変更" v-model="pwdupVisible" width="30%" @close="resetForm('pwdForm')">
        <el-form :model="pwdup" :rules="rules" ref="pwdForm" style="padding-right: 50px">
          <el-form-item label="元のパスワード" prop="oldPassword" label-width="150px">
            <el-input type="password" v-model="pwdup.oldPassword" placeholder="" maxlength="12"></el-input>
          </el-form-item>
          <el-form-item label="新しいパスワード" prop="newPassword" label-width="150px">
            <el-input type="password" v-model="pwdup.newPassword" maxlength="12"></el-input>
          </el-form-item>
          <el-form-item label="パスワード確認" prop="confirmpwd" label-width="150px">
            <el-input type="password" v-model="pwdup.confirmpwd" maxlength="12"></el-input>
          </el-form-item>
        </el-form>
        <div style="width: 200px; margin: auto; height: 60px; margin-top: 30px">
          <el-button type="primary" @click="editpwdSubmit" v-preventReClick>保存</el-button>
          <el-button @click="resetForm('pwdForm')">リセット</el-button>
        </div>
      </el-dialog>
      <el-dialog title="個人情報" v-model="personInfoVisible" width="50%">
        <table class="mytable" cellpadding="0" cellspacing="0">
          <tr class="mytr">
            <td class="mytd">会社の名前</td>
            <td class="mytd1">
              <el-select v-model="personInfo.groupEnterpriseGuid" placeholder="選択してください" disabled>
                <el-option v-for="item in enteroption" :key="item.value" :value="item.value" :label="item.label"> </el-option>
              </el-select>
            </td>
            <td class="mytd">部門名称</td>
            <td class="mytd1">
              <el-select v-model="personInfo.departGuid" placeholder="選択してください" class="paperview-input-text" disabled>
                <el-option v-for="item in demoption" :key="item.value" :value="item.value" :label="item.label"> </el-option>
              </el-select>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">社員番号</td>
            <td class="mytd1">
              <el-input v-model="personInfo.userNo" placeholder="" class="paperview-input-text" readonly></el-input>
            </td>
            <td class="mytd">管理員か否か</td>
            <td class="mytd1">
              <el-switch class="demo" v-model="personInfo.flag" inline-prompt active-text="はい" inactive-text="いいえ" active-color="#13ce66" inactive-color="#ff4949" disabled> </el-switch>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">名前</td>
            <td class="mytd1">
              <el-input v-model="personInfo.userName" placeholder="" class="paperview-input-text" readonly></el-input>
            </td>
            <td class="mytd">本籍</td>
            <td class="mytd1">
              <el-input v-model="personInfo.origo" placeholder="" class="paperview-input-text"></el-input>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">性別</td>
            <td class="mytd1">
              &nbsp;&nbsp;&nbsp;
              <el-radio v-model="personInfo.sex" label="1">男</el-radio>
              <el-radio v-model="personInfo.sex" label="2">女</el-radio>
            </td>
            <td class="mytd">学歴</td>
            <td class="mytd1">
              <el-select v-model="personInfo.education" placeholder="選択してください" class="paperview-input-text">
                <el-option v-for="item in eduoption" :key="item.value" :value="item.value" :label="item.label"> </el-option>
              </el-select>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">職務</td>
            <td class="mytd1">
              <el-select v-model="personInfo.roleGuid" placeholder="選択してください" class="paperview-input-text" disabled>
                <el-option v-for="item in roleoption" :key="item.value" :value="item.value" :label="item.label"> </el-option>
              </el-select>
            </td>
            <td class="mytd">卒業時間</td>
            <td class="mytd1">
              <el-date-picker v-model="personInfo.graduationTime" type="date" placeholder="選択してください" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="paperview-input-text">
              </el-date-picker>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">連絡先1</td>
            <td class="mytd1">
              <el-input v-model="personInfo.tel1" placeholder="" class="paperview-input-text"></el-input>
            </td>
            <td class="mytd">連絡先2</td>
            <td class="mytd1">
              <el-input v-model="personInfo.tel2" placeholder="" class="paperview-input-text"></el-input>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">身分証明書番号</td>
            <td class="mytd1">
              <el-input v-model="personInfo.idCar" placeholder="" class="paperview-input-text"></el-input>
            </td>
            <td class="mytd">入職時間</td>
            <td class="mytd1">
              <el-date-picker v-model="personInfo.hiredate" type="date" placeholder="選択してください" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="paperview-input-text"> </el-date-picker>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">メールアドレス</td>
            <td class="mytd1" colspan="3">
              <el-input v-model="personInfo.email" placeholder="" class="paperview-input-text"></el-input>
            </td>
          </tr>
        </table>
        <div style="width: 100%; text-align: center; margin-top: 30px">
          <el-button type="primary" @click="personInfoSubmit" v-preventReClick>保存</el-button>
        </div>
      </el-dialog>
    </el-container>
  </el-container>
</template>

<script>
import { useStore } from 'vuex'
import commonTabs from '../util/commonTabs.vue'

export default {
  components: {
    'common-tabs': commonTabs
  },
  data() {
    return {
      iscollapse: false,
      activePath: '',
      pwdupVisible: false,
      personInfoVisible: false,
      myNewsNum: '',
      // 更改密码表单数据
      pwdup: {
        newPassword: '',
        oldPassword: '',
        userinfoGuid: this.$store.getters.showuserGuid,
        confirmpwd: ''
      },
      personInfo: {},
      // 公司列表
      enteroption: [],
      // 部门列表
      demoption: [],
      // 学历列表
      eduoption: [],
      // 职务列表
      roleoption: [],
      routerDirectory: [],
      store: useStore(),
      // 表单规则校验
      rules: {
        oldPassword: [{ required: true, min: 6, max: 12, message: '６～１２桁のパスワードを入力してください', trigger: 'blur' }],
        newPassword: [{ required: true, min: 6, max: 12, message: '６～１２桁のパスワードを入力してください', trigger: 'blur' }],
        confirmpwd: [{ required: true, min: 6, max: 12, message: '６～１２桁のパスワードを入力してください', trigger: 'blur' }]
      },
      count: '',
      table: false,
      gridData: [],
      myNewListSearch: {
        indexPage: 1,
        pageSize: 8,
        searchbean: {
          personnelGuid: this.$store.getters.showuserGuid,
          preadflg: ''
        }
      },
      alreadyReadId: {
        pguids: []
      },
      itemKey: ''
    }
  },
  created() {
    // this.iscollapse = window.sessionStorage.getItem('state')
    this.routerDirectory = this.$store.getters.showRouterInfo
    console.log(this.routerDirectory)
    this.activePath = window.sessionStorage.getItem('path')
    this.getMyNewsNum()
    this.unReadmessage()
  },
  methods: {
    handleSizeChange(newSize) {
      console.log(newSize)
      this.myNewListSearch.pageSize = newSize
      this.getMynewsList()
    },
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.myNewListSearch.indexPage = newPage
      this.getMynewsList()
    },
    getMyNewsNum() {
      this.axios
        .post('/pushlog/selectnotreadcount', {
          personnelGuid: this.$store.getters.showuserGuid
        })
        .then((res) => {
          console.log(res)
          this.myNewsNum = res.data.data
        })
    },
    toggleCollapse() {
      this.iscollapse = !this.iscollapse
      // window.sessionStorage.setItem('state', this.iscollapse)
    },
    clickMenu(active, label) {
      window.sessionStorage.setItem('path', active)
      let routerLabel = { name: active, label: label }
      if (active === '/Addreport') routerLabel.name = '/Jobtimereport'
      if (active === '/PublicDisk') routerLabel.name = '/SharedHardDisk'
      console.log(routerLabel)
      this.$store.commit('selectMenu', routerLabel)
    },
    handleCommand(command) {
      if (command == 3) {
        window.sessionStorage.clear()
        window.localStorage.clear()
        this.$router.push('/login')
        this.$store.commit('selectMenu', { name: '/children', lable: 'Top' })
      }
      if (command == 1) {
        this.pwdupVisible = true
      }
      if (command == 2) {
        // 聲明對象
        function ObjStory(label, value) {
          this.label = label
          this.value = value
        }
        window.sessionStorage.setItem('t', JSON.stringify(this.$store.getters.showuserInfo))
        this.personInfo = JSON.parse(window.sessionStorage.getItem('t'))
        console.log(this.personInfo)
        if (this.personInfo.flag === '0') this.personInfo.flag = true
        else if (this.personInfo.flag === '1') this.personInfo.flag = false
        this.personInfo.graduationTime = this.personInfo.graduationTime.slice(0, 10)
        this.personInfo.hiredate = this.personInfo.hiredate.slice(0, 10)
        this.axios.post('/userInfo/insert/info').then((res) => {
          console.log(res.data)
          // 获取公司
          this.enteroption = []
          this.demoption = []
          this.eduoption = []
          this.roleoption = []
          res.data.data.groupEnterpriseVos.forEach((item) => {
            this.enteroption.push(new ObjStory(item.enterpriseName, item.groupEnterpriseGuid))
          })
          // 获取部门
          res.data.data.groupEnterpriseVos[0].departments.forEach((item) => {
            this.demoption.push({ label: item.departName, value: item.departGuid })
          })
          console.log(this.demoption)
          // 获取学历
          res.data.data.educations.forEach((item) => {
            this.eduoption.push(new ObjStory(item.educationName, item.educationGuid))
          })
          // 获取职务
          res.data.data.groupEnterpriseVos[0].roles.forEach((item) => {
            this.roleoption.push(new ObjStory(item.roleName, item.roleGuid))
          })
          console.log(this.roleoption)
        })
        this.personInfoVisible = true
      }
    },
    editpwdSubmit() {
      this.$refs.pwdForm.validate((valid) => {
        if (valid) {
          if (this.pwdup.newPassword === this.pwdup.confirmpwd) {
            this.axios.post('/userInfo/update/password', this.pwdup).then((res) => {
              console.log(res)
              if (res.data.success === 0)
                return this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: 'warning'
                })
              this.$message.success(this.$getMsg('I0002'))
              this.pwdupVisible = false
              window.localStorage.clear()
              this.$router.push('/login')
            })
          } else if (this.pwdup.newPassword !== this.pwdup.confirmpwd) return this.$message.warning('新しいパスワードとパスワード確認が不一致でした')
        } else {
          if (
            this.pwdup.oldPassword.length < 6 ||
            this.pwdup.oldPassword.length > 12 ||
            this.pwdup.newPassword.length < 6 ||
            this.pwdup.newPassword.length > 12 ||
            this.pwdup.confirmpwd.length < 6 ||
            this.pwdup.confirmpwd.length > 12
          ) {
            return this.$message.warning('６～１２桁のパスワードを入力してください')
          }
          return false
        }
      })
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    personInfoSubmit() {
      console.log(this.personInfo)
      if (this.personInfo.flag === true) this.personInfo.flag = '0'
      else if (this.personInfo.flag === false) this.personInfo.flag = '1'
      const pwd = this.personInfo.pwd
      delete this.personInfo.pwd
      console.log(this.personInfo)
      if (this.personInfo.origo === '') {
        return this.$message.error('本籍が空できません')
      }
      if (this.personInfo.graduationTime === null) return this.$message.warning('卒業時間は未記入')
      if (this.personInfo.tel1 === '') {
        return this.$message.error('連絡先1が空できません')
      }
      if (this.personInfo.idCar === '') {
        return this.$message.error('身分証明書が空できません')
      }
      if (this.personInfo.hiredate === null) return this.$message.warning('入職時間は未記入')
      if (this.personInfo.email === '') {
        return this.$message.error('メールアドレスが空できません')
      }
      this.axios
        .post('/userInfo/update', this.personInfo)
        .then((res) => {
          console.log(res)
          if (res.data.success !== 1) {
            return this.$message.error(res.data.msg)
          }
          this.personInfo.pwd = pwd
          this.store.commit('saveUserInfo', this.personInfo)
          this.$message.success(this.$getMsg('I0002'))
          this.personInfoVisible = false
        })
        .catch((error) => {
          console.log(error)
        })
    },
    unReadmessage() {
      this.axios
        .post('/meetingpersons/select/count', { userinfoGuid: this.$store.getters.showuserGuid })
        .then((res) => {
          console.log(res)
          this.count = res.data.data
          console.log(this.count)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getMynewsList() {
      this.axios.post('/pushlog/select/list', this.myNewListSearch).then((res) => {
        this.itemKey = Math.random()
        this.myNewList = res.data.data.list
        this.total = res.data.data.total
      })
    },
    alreadyRead(pguid) {
      this.alreadyReadId.pguids.push(pguid)
      this.axios.put('/pushlog/update/readflg', this.alreadyReadId).then((res) => {
        this.getMynewsList()
        this.getMyNewsNum()
        this.alreadyReadId.pguids = []
      })
    },
    way() {
      this.table = true
      this.getMynewsList()
    }
  }
}
</script>

<style scoped>
.header {
  padding: 0 0 !important;
}
.toplogo {
  flex: 2;
  height: 60px;
  line-height: 60px;
  margin-left: 0;
  background-image: url(../image/jshglogin.png);
  background-repeat: no-repeat;
  background-size: 350px 100%;
  box-sizing: border-box;
}
#topImg {
  display: flex;
  margin-left: 0;
  width: 100%;
  height: 100%;
  background-color: #409eff;
}
.tx {
  flex: 5;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}
.tx span {
  color: #fff;
  line-height: 60px;
}
/* 下拉列表 */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.role {
  margin-left: 10px;
}
.el-icon-message-solid {
  margin-left: 20px;
  margin-top: 24px;
  color: #409eff;
}
/* 侧边栏 */
.top {
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(-12px);
}
.aside {
  background-color: rgb(192, 190, 190);
  border-right: none;
}
.blue {
  background-color: blue;
}
/* .one {
  background-color: skyblue;
} */
.el-sub-menu .el-menu-item {
  min-width: 180px;
}
/* 个人信息样式 */
#home_container .mytr {
  white-space: nowrap;
  border: 1px solid #929292 !important;
}

#home_container .mytd {
  text-align: right !important;
  padding-right: 10px !important;
  border: 1px solid #929292 !important;
  background: #e6e6e6;
}

#home_container .mytd1 {
  border: 1px solid #929292 !important;
  padding-left: 20px;
}

#home_container .mytable {
  width: 100%;
}
:deep(.pagination1) {
  height: unset;
  position: absolute;
  bottom: unset;
  left: 50%;
  transform: translateX(-50%);
}
.tabsClass {
  position: relative;
  top: 13px;
}
.el-main {
  --el-main-padding: 0px;
}
#small .el-header {
  height: 55px;
}
.cebianlan {
  height: 55px;
  text-align: center;
  background-color: skyblue;
  line-height: 60px;
}
.iconfont.icon-shensuo {
  font-size: 54px;
}
:deep(.el-tabs__header) {
  margin: 0px;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  border: 1px solid #ececec;
  border-bottom: none;
}
:deep(.el-tabs--card > .el-tabs__header) {
  border-bottom: none;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  border-left: 1px solid #ececec;
  border-bottom: none;
}
:deep(.el-tabs__item:hover) {
  background-color: #87ceeb;
  color: #f8f8f8;
}
:deep(.el-tabs__item.is-active) {
  background-color: #87ceeb;
  color: #f8f8f8;
}
:deep(.el-tabs__nav-prev) {
  font-size: 15px;
  color: blue;
}
:deep(.el-tabs__nav-next) {
  font-size: 15px;
  color: blue;
}
</style>
